<template>
	<view id="blance-point" :data-theme="themeStyle">
		<header-back :headerTitle="$lang('List.pointsAccount')"></header-back>
		<view class="content-point">
			<view class="header-point">
				<view class="data-box data-top">
					<view :class="['data-item',typeTop== tabs.state?'item-act':'']" @click="setTabs(tabs,i)" v-for="(tabs,i) in tabArr" :key="i">
						<view class="data-name">{{tabs.title}}</view>
						<view  class="after"></view>
					</view>
				</view>
				<view class="header-wrap header-wrap-bg">
					<view class="wrap-box">
						<view class="wrap" v-if="typeTop == 1">
							<view class="wrap-text">{{ $lang('List.totalCLP') }}</view>
							<view class="num wrap-text">{{ red_credit}}</view>
						</view>
						<view class="wrap" v-if="typeTop == 2">
							<view class="wrap-text">{{$lang('List.totalRP')}}</view>
							<view class="num wrap-text">{{ white_credit }}</view>
						</view>
						<view class="wrap" v-if="typeTop == 3">
							<view class="wrap-text">{{$lang('List.totalInventoryPoints')}}</view>
							<view class="num wrap-text">0</view>
						</view>
					</view>
					<view class="wrap-box" >
						<view class="wrap" v-for="(data,k) in dataAry" :key="k">
							<view class="wrap-text">{{data.name}}</view>
							<view class="num wrap-text">{{data.val}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-border"></view>
			<view class="point-tab">
				<view class="data-box data-tab">
          <template v-if="dataTab">
					<view :class="['data-item',tabIndex== (i)?'item-act':'']" @click="setDataTab(tabs,i)" v-for="(tabs,i) in dataTab" :key="i">
						<view class="data-name">{{tabs.title}}</view>
						<view  class="after"></view>
					</view>
          </template>
				</view>
				<view class="filter-box">
					<view class="left">
						<text v-show="typeTop == 1" class="l-name">{{$lang('List.return')}}：0</text>
						<text v-show="typeTop == 2" class="l-name">{{$lang('List.addBack')}}：0</text>
						<text v-show="typeTop == 3" class="l-name">{{$lang('List.uAgainstInventoryPoints')}}：0</text>
					</view>
					<view class="right" @click="$refs.transPopup.open()">
						<text class="r-name">{{filterObj.name}}</text>
						<image  src="/static/icon/icon_down_01.png" class="down-icon" mode=""></image>
					</view>
				</view>
			</view>
			<view class="point-ul" v-if="recordAry.length > 0">
				<view class="point-li" v-for="(item) in recordAry" :key="item.id">
					<view class="li-title">
						<view class="title">{{item.remark}}</view>
						<view class="title">{{item.money}}</view>
					</view>
					<view class="li-title">
						<view class="from">{{$lang('List.pointsAccount')}}：{{item.remark}}</view>
						<view class="from">{{item.create_time}}</view>
					</view>
				</view>
			</view>
			<view class="no-ul" v-else>
				-- {{$lang('List.noMoreData')}} --
			</view>
		</view>
		
		
		<!-- 选择时间 -->
		<uni-popup ref="transPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.transPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">{{$lang('List.filter')}}</view>
					<view></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(fil,j) in filterArr" :key="j" @click="getTime(fil,j)">
						<view>{{fil.name}}</view>
						<image v-show="filIndex == j" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import Lang from '@/common/js/lang.js'

  import globalConfig from '@/common/js/golbalConfig.js';


  // const dataAry =[
  // 		{name:  Lang.lang('List.uPoints'),val: ''},
  // 		{name:  Lang.lang('List.cumulativelyAdded'),val: ''},
  // 		{name:  Lang.lang('List.addedToday'),val: ''},
  // 	]
  // 	this.dataTab = [
  // 		{title:  Lang.lang('List.all'),state: ''},
  // 		{title:  Lang.lang('List.otherAdditions'),state: ''},
  // 		{title:  Lang.lang('List.uPoints'),state: ''},
  // 	]
  let CLPAry,CLPTab,RPAry,RPTab,FilterArr;
  export default {
    mixins:[globalConfig],
    data() {
		return {
			typeTop: 1,
			tabArr: [
				{title: 'CLP',state: '1'},
				{title: 'RP',state: '2'},
				// {title: '库存积分',state: '3'},
			],
			dataTab: [],
			tabIndex: 0,
			dataAry: [],
			filterArr: [],
			filIndex: 0,
			filterObj: {},
			recordAry: [],
			page: 1,
			totalPage: 1,
			detailObj: {},
			start_time: '',
			end_time: '',
			userInfo: {},
      white_credit: 0,
      red_credit:0,
      log_type: 0,
		};
	},
	async onLoad(e) {
    this.typeTop = e.type;
    await this.invitData();
    CLPAry = [
      {name:  Lang.lang('List.cumulativeReturn'),val: 0},
      {name:  Lang.lang('List.returnToday'),val: 0},
    ];
    RPAry = [
      {name:  Lang.lang('List.cumulativelyAdded'),val: 0},
      {name:  Lang.lang('List.addedToday'),val: 0},
    ];
    CLPTab = [
      {title:  Lang.lang('List.all'),state: 0, log_type: 0},
      {title:  Lang.lang('List.consumerRebate'),state: 0, log_type: 6},
    ];
    RPTab = [
      {title:  Lang.lang('List.all'),state: 0, log_type: 0},
      {title:  Lang.lang('List.addedToday'),state: 0, log_type: 0},
    ];
    FilterArr = [
      {name:  Lang.lang('filter.all'),state: '0'},
      {name:  Lang.lang('filter.within3Months'),state: '1'},
      {name:  Lang.lang('filter._30DaysTo90Days'),state: '2'},
      {name:  Lang.lang('filter.thisYear'),state: '3'},
      {name:  Lang.lang('filter.lastYear'),state: '4'},
    ]

    this.filterArr = FilterArr
    this.filterObj = this.filterArr[0];
		this.userInfo = uni.getStorageSync('userInfo')
		// if(this.userInfo.member_level_name != '铂钻会员'){
		// 	this.tabArr = [
		// 		{title: '红积分',state: '1'},
		// 		{title: '白积分',state: '2'},
		// 	]
		// }
	},
	components: {
		headerBack,
		uniPopup
	},
	onShow() {

  },
  watch:{
    typeTop(val){
      switch (parseInt(val)){
        case 1:
            this.dataAry = CLPAry;
            this.dataTab = CLPTab;
            console.log(this)
          break;
        case 2:
          this.dataAry = RPAry;
          this.dataTab = RPTab;
          break;
      }

      console.log("val===--------->", this.dataAry, CLPAry);
    }
  },
	methods: {
		// 切换顶部tab
		setTabs(obj,index){
			this.typeTop = obj.state;
			this.handleData(this.typeTop)
			this.invitData();
		},
		// 处理显示的静态数据
		handleData(type){
      this.tabIndex = 0;

    },
		
		// 切换数据tab
		setDataTab(obj,index){
			this.tabIndex = index;
      this.log_type = obj.log_type
      this.invitData();
		},
		// 弹框选择
		getTime(obj,index){
			this.filIndex = index;
			this.filterObj = obj;
			if(obj.state == 0){
				this.start_time = '';
				this.end_time = '';
			}else {
				this.handleTime(obj.state)
			}
			this.invitData();
			this.$refs.transPopup.close();
		},
		// 处理时间
		handleTime(type){
			let nowTime = new Date().getTime() / 1000
			let endTime =  '';
			let startTime =  '';
			if(type == 1){
				endTime = nowTime;
				startTime = endTime - (90 * 86400) 
			}else if(type == 2){ // 30 - 90
				startTime = nowTime - (90 * 86400)
				endTime = nowTime - (30 * 86400)
			}else if(type == 3 || type == 4){  // 今年 // 去年
				let year = new Date().getFullYear()
				let day = (type == 3?year:(year - 1)) +'/'+ '01' +'/'+ '01'+' '+'00:00:00'
				let day2 = year +'/'+ '01' +'/'+ '01'+' '+'00:00:00'
				startTime = new Date(day).getTime() / 1000  
				endTime = type == 3? nowTime : new Date(day2).getTime() / 1000;
			}
			this.start_time = this.$util.timeStampTurnTime(startTime)
			this.end_time = this.$util.timeStampTurnTime(endTime)
		},
		// 初始化
		async invitData(){
			this.page = 1;
			this.totalPage = 1;
			this.recordAry = [];
			await this.getList();
		},
		// 获取列表
		async getList(){
      await this.$api.sendRequest({
				url: '/api/memberaccount/credit',
				data: {
					page: this.page,
					page_size: 10,
					start_time: this.start_time,
					end_time: this.end_time,
					type: this.typeTop,
					log_type: this.log_type,
				},
				method: 'get',
				success: res=>{
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					if(res.code == 0){
						this.detailObj = res.data;
						this.totalPage = res.data.list.page_count;
            const {white_credit, red_credit, white_credit_add, white_credit_add_day, red_credit_back, red_credit_back_today} = res.data;
            CLPAry[0].val = red_credit_back; // 红积分累计
            CLPAry[1].val = red_credit_back_today; // 今日返还
            RPAry[0].val = white_credit_add; // 白积分累计
            RPAry[1].val = white_credit_add_day; // 白积分今日新增

            this.white_credit = white_credit
            this.red_credit = red_credit

						if(this.page == 1){
							this.recordAry = res.data.list.list;
						}else {
							this.recordAry.push(...res.data.list.list)
						}
					}
				}
			})
		},
	},
	onReachBottom() {
		if (this.page > this.totalPage || this.page == this.totalPage) return
		this.page++
		this.getList()
	}
};
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.header-point {
		background: #fff;
		padding: 14rpx 32rpx 30rpx;
		box-sizing: border-box;
		// margin-bottom: 20rpx;
		.data-top {
			padding: 0px 44rpx;
			box-sizing: border-box;
			margin-top: 0px;
		}
		
		.header-wrap {
			width: 100%;
			background: linear-gradient(270deg, #FF7979 0%, #FF4F4D 100%);
			border-radius: 10rpx;
			padding: 12rpx 28rpx 24rpx;
			box-sizing: border-box;
			margin-top: 26rpx;
			.wrap-box {
				padding-top: 22rpx;
				display: grid;
				align-items: center;
				grid-template-columns: 1fr 1fr 1fr;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #FF8988;
				.wrap {
					color: #fff;
					font-family: PingFangSC-Regular, PingFang SC;
					font-size: 24rpx;
					.num {
						margin-top: 14rpx;
						font-weight: 600;
						line-height: 34rpx;
					}
				}
				.wrap-r {
					text-align: right;
				}	
				.wrap-c {
					text-align: center;
				}
			}
			.wrap-box:last-child {
				border: none;
			}
					
			.wrap-text {
				color: #fff;
			}
		}
	}
	
	.margin-border {
		width: 100%;
		height: 20rpx;
		background: #F8F7FC;
	}
	
	.data-box {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.data-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 54rpx;
			.data-name {
				font-size: 28rpx;
				font-weight: 600;
				color: #92969E;
				line-height: 40rpx;
				// padding-bottom: 8rpx;
			}
			.after {
				width: 70rpx;
				height: 6rpx;
				background: #31bb6d;
				border-radius: 4rpx;
				opacity: 0;
			}
		}
		.item-act {
			.data-name {
				color: #31bb6d;
				font-weight: 600;
			}
			.after {
				opacity: 1;
			}
		}
	}
	
	.point-tab {
		background: #fff;
		padding: 14rpx 32rpx 20rpx;
		box-sizing: border-box;
		.data-tab {
			justify-content: flex-start;
			.data-item {
				margin-right: 48rpx;
			}
		}
		.filter-box {
			margin-top: 32rpx;
			background: #F8F7FC;
			border-radius: 10rpx;
			height: 78rpx;
			padding: 0px 26rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l-name {
				font-size: 24rpx;
				color: #31bb6d;
				font-weight: 600;
			}
			.right {
				display: flex;
				align-items: center;
				.r-name {
					font-size: 24rpx;
					color: #282828;
					font-weight: 600;
					margin-right: 16rpx;
				}
				.down-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	
	.point-ul {
		background: #fff;
		background: #fff;
		padding: 14rpx 32rpx 20rpx;
		box-sizing: border-box;
		.point-li {
			padding: 22rpx 0px 34rpx;
			border-bottom: 2rpx solid #E8EDF5;
			.li-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title {
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #292929;
					font-size: 30rpx;
					line-height: 48rpx;
					margin-bottom: 12rpx;
				}
				.from {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #92969E;
				}
			}
		}
	}
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
	}
	
	
</style>
